﻿@using FController = Host.Controllers.FundController
@using Host.Models
@model Host.Models.RuleModel
@{
    ViewBag.Title = "AdminRule";
}
<h2>AdminRule</h2>
<p>
    Use the create button to create a new system rule, use the create relationship button
    to associate a question to a fund.</p>
<div id="CreateDialog" title="Create a question">
    <fieldset>
        <legend>Create the rule for the fund</legend>
        <table style="width: 100%;">
            <tr>
                <td colspan="2">
                    <br />
                </td>
            </tr>
            <tr>
                <td>
                    Question:
                </td>
                <td>
                    <input type="text" id="questionDescription" name="questionDescription" class="tip"
                        style="width: 90%;" title="This is the question that will be shown in the reports." />
                </td>
            </tr>
            <tr>
                <td style="width: 190px;">
                    Expected Answer Type:
                </td>
                <td>
                    <select id="Answertype">
                        @foreach (var type in new Host.Models.Data().AnswerDataType)
                        {
                            <option value="@type.AnswerDataTypeId">
                                @switch (type.AnswerDataTypeDescription)
                                {
                                    case "Boolean":
                                        Write("True / False");
                                        break;
                                    case "String":
                                        Write("Text");
                                        break;
                                    case "Integer":
                                        Write("Number");
                                        break;
                                    case "Numeric":
                                        Write("Decimal Number");
                                        break;
                                    case "Count":
                                        Write("Count");
                                        break;
                                    case "Compare":
                                        Write("Compare");
                                        break;
                                }
                            </option>
                        }
                    </select>
                </td>
            </tr>
            <tr>
                <td>
                    Question Category:
                </td>
                <td>
                    <select  id="questionCategory" style="width: 160px;">
                        @foreach (var QuestionCategory in new Host.Models.Data().QuestionCategory)
                        {
                            <option value="@QuestionCategory.QuestionCategoryId">@QuestionCategory.Category</option>
                        }
                    </select>
                </td>
            </tr>
            <tr>
                <td>
                    Is General Rule:
                </td>
                <td>
                    <div class="checkbox">
                        <input type="checkbox" name="GenRule" id="GenRule" />
                    </div>
                </td>
            </tr>
            <tr>
                <td>
                    Question Group:
                </td>
                <td>
                    <select id="QuestionGroupForm"  style="width: 420px;">
                    </select>
                </td>
            </tr>
            <tr>
                <td colspan="2">
                    <br />
                    <div class="info" style="width: 100%;">
                        <table>
                            <tr style="vertical-align: top;">
                                <td>
                                    <div class="remember">
                                    </div>
                                </td>
                                <td style="padding-left: 10px; font-size: 11px;">
                                    To create a rule for the selected fund, type the question words in the provided
                                    text area, select the appropriate expected answer type and the question category
                                    that the question belongs with the question group that will be used to identify
                                    the question. Click the save button if all is satisfactory.
                                    <br />
                                    <ul>
                                        <li>I.E. If there are no question group items when selecting the question category then
                                            use the "Create group relationship" button to create a relationship between the
                                            question category and the question group. </li>
                                    </ul>
                                </td>
                            </tr>
                        </table>
                    </div>
                </td>
            </tr>
        </table>
    </fieldset>
    <fieldset>
        <legend>Create the relationship for Question Group </legend>
        <table>
            <tr>
                <td colspan="2">
                    <br />
                    <button onclick="showCatelogMap()">
                        Create group relationship</button>
                </td>
            </tr>
            <tr>
                <td colspan="2">
                    <br />
                    <div class="info" style="width: 100%;">
                        <table>
                            <tr style="vertical-align: top;">
                                <td>
                                    <div class="remember">
                                    </div>
                                </td>
                                <td style="padding-left: 10px; font-size: 11px;">
                                    The button "Create group relationship" will show a new dialog to allow the creating
                                    of the relationship between a question category and a question group.
                                    <br />
                                    <ul>
                                        <li>I.E. This is only to be used if there are no items in the selection option when
                                            changing the Question Category. </li>
                                    </ul>
                                </td>
                            </tr>
                        </table>
                    </div>
                </td>
            </tr>
        </table>
    </fieldset>
</div>
<script id="CreateDialogScript" type="text/javascript">
    $( function (){
        $( "#CreateDialog" ).dialog( {//Create the dialog control 
            autoOpen: false, //set the auto open [so that the page load does not show the dialog
            resizable: false, //fix the size of the control
            height: 755,
            width: 950,
            modal: true, //set the model property to block user intervention on the page
            buttons: {
                'Save': function ()
                { //Save method that will be called when dialog save button is clicked

                    saveCreateRule();
                    $( this ).dialog( 'close' ); //Close the dialog 
                    window.location.href = window.location.href;
                },
                Cancel: function ()
                { //Close the dialog and reset controls when the cancel button is clicked
                    $( this ).dialog( 'close' ); //Close the dialog
 
                }
            }
        } );
        $( "#Answertype" ).change( function () { GetQuestionGroup(); } );
        $( "#questionCategory" ).change( function () { GetQuestionGroup(); } );
    } );

    function GetQuestionGroup()
    {
        var QuestionCategoryId = $( "#questionCategory" ).val(); 
        $.ajax( {
            url: '@Url.Action("GetQuestionGroupForCategory", "Fund")', type: "POST", contentType: 'application/json',
            data: JSON.stringify( { QuestionCategoryId: QuestionCategoryId } ),
            success: function ( data )
            {
                $( "#QuestionGroupForm" ).find( "option" ).remove(); //Clean up the control
                $.each( data, function ()
                {
                    $.each( this, function ( k, v )
                    {
                        $( "#QuestionGroupForm" ).append( "<option value=" + v.QuestionGroupId + ">" + v.Description + "</option>" );
                    } );
                } );
                $( "#QuestionGroupForm" ).selectmenu( {} ); //set the control to look like the rest
            }
        } );
     }

    function saveCreateRule()
    {
        var isGeneral = $( ".checkbox" ).children( "input" ).attr( "checked" );
        var Question = $( "#questionDescription" ).val();
        var Category = $( "#questionCategory" ).val();
        var Group = $( "#QuestionGroupForm" ).val();
        var Type = $( "#Answertype" ).val();
      
        
        $.ajax( {
            url: '@Url.Action("SaveQuestion", "Fund")', type: 'POST', contentType: 'application/json',
            data:JSON.stringify({ QuestionDescription: Question, QuestionCategory: Category, intQuestionGroup: Group, AnswerType: Type ,isGeneral:isGeneral}) ,
            success: function ( data )
            {
            },
            error: function () { alert( "Failed" ); }
        } );
    }
</script>
<button id="CreateRule">Create Rule</button>
<button id="CreateRelationship">Create Relationship</button>
<script id="CreateRuleButton" type="text/javascript">
    $( function (){
        $( "#CreateRule" ).click( function (){
            $( "#CreateDialog" ).dialog( 'open' );
            $( "#Answertype" ).selectmenu( {} );
            $( "#questionCategory" ).selectmenu( {} );
            $( "#questionDescription" ).val( "" );
            GetQuestionGroup();
        } );
    } );
</script>
<div id="CurrentRulesSection">
@using (Html.BeginForm("AdminRule", "Fund", FormMethod.Post, new { id = "f" }))
{
        <fieldset>
            <legend>Current Rules</legend>
            <table>
                <tr>
                    <td>
                        Fund:
                    </td>
                    <td>
                        @Html.DropDownListFor(model => model.FundId, new SelectList(Model.Funds, "Value", "Text"), new { @id = "ddlFund" })
                    </td>
                </tr>
                <tr>
                    <td style="width: 120px;">
                        Question Group:
                    </td>
                    <td>
                        @Html.DropDownListFor(model => model.QuestionGroup, new SelectList(Model.QuestionGroups, "Value", "Text"), new { @id = "ddlQuestionGroup" })
                    </td>
                </tr>
                <tr>
                    <td colspan="2">
                        <div>
                            @{ 
                        
    var grid = new WebGrid(canPage: true, rowsPerPage: FController.QuestionPageSize, canSort: true, ajaxUpdateContainerId: "grid", ajaxUpdateCallback: "updateStyle");
    grid.Bind(Model.Questions, rowCount: Model.TotalRecords, autoSortAndPage: false);
    grid.Pager(WebGridPagerModes.All);
                                @grid.GetHtml(
                                                   tableStyle: "ui-grid-content ui-widget-content",
                                                   headerStyle: "ui-grid-header ui-widget-header ui-corner-top ui-state-default",
                                                   footerStyle: "ui-grid-footer ui-widget-header ui-corner-bottom ",
                                                   alternatingRowStyle: "webgrid-alternating-rows",
                                    htmlAttributes: new { id = "grid" },
                                    columns: grid.Columns(
                                        grid.Column("Description"),
                                        grid.Column("Answer"),
                                        grid.Column("AnswerType"),
                                        grid.Column(format: @<a href='#' onclick="Edit(@item.FundAnswerSheetId)" >Delete</a>)
                                    ));
                            }
                        </div>
                    </td>
                </tr>
            </table>
        </fieldset>
}
</div>
<script id="CurrentRulesForm" type="text/javascript">
    $( function (){
        $( "#ddlFund" ).selectmenu( {} );
        $( "#ddlQuestionGroup" ).selectmenu( {} );
        $( '#ddlFund' ).change( function () { $( 'form#f' ).submit(); return false; } );
        $( '#ddlQuestionGroup' ).change( function () { $( 'form#f' ).submit(); return false; } );
        updateStyle();
    } );
    function updateStyle(){
        $( ".ui-grid-footer" ).find( "a" ).each( function ( i, el ) { $( this ).button(); } );
        $( ".ui-grid-content tbody" ).find( "a" ).each( function ( i, el ) { $( this ).button(); } );
    }
</script>
<div id="CreateRelationshipDialog" title="Create relationship for a question">
    <table style="width: 100%;">
        <tr>
            <td style="width: 200px;">
                Fund:
            </td>
            <td>
                <select id="fundOption"  style="width: 160px;">
                    @foreach (var funditem in new Host.Models.Data().Fund)
                    {
                        <option value="@funditem.FundId">@funditem.FundName</option>
                    }
                </select>
            </td>
        </tr>
        <tr>
            <td>
                Question Category:
            </td>
            <td>
                <select  id="questionCategoryption" style="width: 160px;">
                    @foreach (var questionCategoryItem in new Host.Models.Data().QuestionCategory)
                    {
                        <option value="@questionCategoryItem.QuestionCategoryId">@questionCategoryItem.Category</option>
                    }
                </select>
            </td>
        </tr>
        <tr>
            <td>
                Question Group:
            </td>
            <td>
                <select id="questionGroupOption"  style="width: 600px;">
                </select>
            </td>
        </tr>
        <tr>
            <td>
                Question:
            </td>
            <td>
                <select name="questionOption" id="questionOption" style="width: 600px;">
                </select>
            </td>
        </tr>
        <tr>
            <td>
                Answer:
            </td>
            <td>
                <input type="text" id="answerOption" name="answerOption" /><span id="error"></span>
            </td>
        </tr>
        <tr>
            <td colspan="2">
                <div class="info" style="width: 100%;">
                    <table>
                        <tr style="vertical-align: top;">
                            <td>
                                <div class="remember">
                                </div>
                            </td>
                            <td style="padding-left: 10px; font-size: 11px;">
                                To create a relationship for the question to the fund use the options provided.
                                <br />
                                <ul>
                                    <li>Select the fund that requires the question to be validated</li>
                                    <li>Select the category that question group belongs to</li>
                                    <li>Select the question</li>
                                    <li>Insert the expected answer</li>
                                </ul>
                            </td>
                        </tr>
                    </table>
                </div>
            </td>
        </tr>
    </table>
</div>
<script id="RelDialog" type="text/javascript">
    var AnswerTypeValidation;
    var errorDisplay;
    $( function (){
        errorDisplay = $( '#error' );

        $( "#CreateRelationshipDialog" ).dialog( {
            autoOpen: false, //set the auto open [so that the page load does not show the dialog
            resizable: false, //fix the size of the control
            height: 455,
            width: 950,
            modal: true, //set the model property to block user intervention on the page
            buttons: {
                'Save': function ()
                { //Save method that will be called when dialog save button is clicked
                    var valid = GetAnswerValidation();
                    if ( valid )
                    {
                        SaveFundRelationship();
                        errorDisplay.hide();
                        $( this ).dialog( 'close' ); //Close the dialog 
                        window.location.href = window.location.href;
                    } else
                    {
                        errorDisplay.val( 'Error: Invalid answer, expecting a type of ' + AnswerTypeValidation );
                        $( '#error' ).show();
                    }
                },
                Cancel: function ()
                { //Close the dialog and reset controls when the cancel button is clicked
                    $( this ).dialog( 'close' ); //Close the dialog
                }
            }
        } );
    } );
</script>
<script id="RelationshipScript" type="text/javascript">
    $( function (){
        $( "#CreateRelationship" ).click( function ()
        {
            GetGroup();
            $( "#CreateRelationshipDialog" ).dialog( 'open' );
            $( '#fundOption' ).change( function () { GetQuestion(); } );
            $( '#questionCategoryption' ).change( function () { GetGroup(); } );
            $( '#questionGroupOption' ).change( function () { GetQuestion(); } );
            $( "#questionCategoryption" ).selectmenu( {} );
            $( "#questionGroupOption" ).selectmenu( {} );
            $( "#fundOption" ).selectmenu( {} );
            $( "#questionOption" ).selectmenu( {} );
            GetQuestion();
        } );

    } );

    function GetQuestion(){
        var QuestionGroupId = $( "#questionGroupOption" ).val();
        $.ajax( {
            url: '@Url.Action("GetQuestionForQuestionGroup", "Fund")', type: "POST", contentType: 'application/json',
            data: JSON.stringify( { QuestionGroupId: QuestionGroupId } ),
            success: function ( data )
            {
                $( "#questionOption" ).find( "option" ).remove(); //Clean up the control
                $.each( data, function ()
                {
                    $.each( this, function ( k, v )
                    {
                        $( "#questionOption" ).append( "<option value=" + v.QuestionId + ">" + v.Description + "</option>" );
                    } );
                } );
                $( "#questionOption" ).selectmenu( {} ); //set the control to look like the rest
            },
            error: function () {  }
        } );
    }

    function GetGroup(){
        var QuestionCategoryId = $( "#questionCategoryption" ).val();
        $.ajax( {
            url: '@Url.Action("GetQuestionGroupForCategory", "Fund")', type: "POST", contentType: 'application/json',
            data: JSON.stringify( { QuestionCategoryId: QuestionCategoryId } ),
            success: function ( data )
            {
                $( "#questionGroupOption" ).find( "option" ).remove(); //Clean up the control
                $.each( data, function ()
                {
                    $.each( this, function ( k, v )
                    {
                        $( "#questionGroupOption" ).append( "<option value=" + v.QuestionGroupId + ">" + v.Description + "</option>" );
                    } );
                } );
                $( "#questionGroupOption" ).selectmenu( {} ); //set the control to look like the rest
            }
        } );
    }

    function GetAnswerValidation(){
        return true;
    }

    function SaveFundRelationship(){
        var Fund = $( "#fundOption" ).val();
        var Category = $( "#questionCategoryption" ).val();
        var Group = $( "#questionGroupOption" ).val();
        var Question = $( "#questionOption" ).val();
        var Answer = $( "#answerOption" ).val();
        
        $.ajax( {
            url: '@Url.Action("SaveFundAnswerSheet", "Fund")', type: 'POST', contentType: 'application/json',
            data: JSON.stringify( { Fund: Fund, Category: Category, Group: Group, Question: Question, Answer: Answer } ),
            success: function ( data )
            {
            },
            error: function () { alert( "Failed" ); }
        } );
     }
</script>
<div id="CreateMapForCategory" title="Create question group to category relationship">
    <table style="width: 100%;">
        <tr>
            <td style="width: 200px;">
                Question Group:
            </td>
            <td>
                <input type="text" name="mapQuestionGroup" id="mapQuestionGroup" style="width: 95%;" />
            </td>
        </tr>
        <tr>
            <td>
                Question Category:
            </td>
            <td>
                <select name="mapQuestioCategory" id="mapQuestioCategory" style="width: 160px;">
                    @foreach (var QuestionCategory in new Host.Models.Data().QuestionCategory)
                    {
                        <option value="@QuestionCategory.QuestionCategoryId">@QuestionCategory.Category</option>
                    }
                </select>
            </td>
        </tr>
        <tr>
            <td colspan="2">
                <div class="info" style="width: 100%;">
                    <table>
                        <tr style="vertical-align: top;">
                            <td>
                                <div class="remember">
                                </div>
                            </td>
                            <td style="padding-left: 10px; font-size: 11px;">
                                Select the category that you would like to associate the new question group.
                                <br />
                                <ul>
                                    <li>click save to to save the new question group to the system. </li>
                                </ul>
                            </td>
                        </tr>
                    </table>
                </div>
            </td>
        </tr>
    </table>
</div>
<script id="showCatelogMapScript" type="text/javascript">
    $( function (){
        $( "#CreateMapForCategory" ).dialog( {
            autoOpen: false, //set the auto open [so that the page load does not show the dialog
            resizable: false, //fix the size of the control
            height: 380,
            width: 950,
            modal: true, //set the model property to block user intervention on the page
            buttons: {
                'Save': function ()
                { //Save method that will be called when dialog save button is clicked
                    var CategoryId = $( "#mapQuestioCategory" ).val();
                    var Description = $( "#mapQuestionGroup" ).val();
                    $.ajax( {
                        url: '@Url.Action("CreateMapForCategory", "Fund")', type: "POST", contentType: 'application/json',
                        data: JSON.stringify( { CategoryId: CategoryId, Description: Description } ),
                        success: function ( data )
                        { //Close if successful
                            $( this ).dialog( 'close' ); //Close the dialog
                        }
                    } );
                    $( this ).dialog( 'close' ); //Close the dialog
                    //update the group dropdown
                    GetGroup();
                },
                Cancel: function ()
                { //Close the dialog and reset controls when the cancel button is clicked
                    $( this ).dialog( 'close' ); //Close the dialog
                }
            }
        } );
    } );

    function showCatelogMap(){
        $( "#CreateMapForCategory" ).dialog( 'open' ); $( "#mapQuestioCategory" ).selectmenu( {} );
    }
</script>
<script id="DeleteButtonGridScript"  type="text/javascript">

    function Edit( id )
    {
        $.ajax( {
            url: '@Url.Action("DeleteFundAnswerSheet", "Fund")', type: "POST", contentType: 'application/json',
            data: JSON.stringify( { FundAnswerSheetId: id } ),
            success: function ( data )
            { 
               
            },
            error: function () { }
        } );
        window.location.href = window.location.href;
    }
</script>